<template>
    <div id="applylab">
        <group title="实验室申请">
          <x-input title="课程名称：" type="text" v-model="list.courseName" label-width="90px"></x-input>
          <x-input title="作业名称：" type="text" v-model="list.workName" label-width="90px"></x-input>
          <x-input title="学年：" type="text" v-model="list.year" label-width="90px"></x-input>
          <x-number title="学期：" width="70px" v-model="list.term" :min="1" :max="2" button-style="round" :value="1"></x-number>
          <x-input title="参与人数：" type="text" v-model="list.member" label-width="90px"></x-input>
          <cell title="完成期限">
          <datetime placeholder="请选择日期"  @on-change="CDate"  v-model="list.startTime" format='YYYY-MM-DD HH:mm:00' title="开始于："></datetime>
          <datetime placeholder="请选择日期"  @on-change="CDate"  v-model="list.endTime" format='YYYY-MM-DD HH:mm:00' title="结束于："></datetime>
          </cell><cell @click.native="add" title="添加实验室" is-link></cell>
        </group>  
        <group title="实验室" >
          <div v-for='(item, index) in list.labapplyrecordlist' :key="index">
            <cell title="次数：" :value='item.number'></cell>
            <cell title="实验室:">{{item.name}}</cell>
            <cell title="开始时间:">{{item.startTime}}</cell>
            <cell title="结束时间:">{{item.endTime}}</cell>
            <cell title="累计时间:">{{item.createTime}}</cell>
            <cell title="备注:">{{item.des}}</cell>
            <cell title="状态:">{{item.des}}</cell>
                <cell> 
                  <x-button type="warn" mini @click.native="deletelab(index)">删除</x-button>
                </cell>
          </div>
        </group> 
        <box gap="10px 10px">
            <x-button  type="primary" @click.native="submitapply">提交</x-button>
        </box>
        <div >
          <x-dialog @click="show=false" v-model="show" :dialog-style="{'max-width': '100%', 'width': '100%', 'position': 'fixed', 'top': '50%', 'background': '#fff'}">
            <div >
              <group >   
                  <x-number title="次 数:" width="70px" v-model="lablist.number" :min="1" button-style="round" :value="1"></x-number>
                  <!-- <x-input title="次 数：" v-model="lablist.number" type="text" label-width="90px"></x-input> -->
                  <x-input title="实验室名：" v-model="lablist.name" type="text" label-width="90px"></x-input>
                  <datetime placeholder="请选择日期" @on-change="CTime"  v-model="lablist.startTime" format='YYYY-MM-DD HH:mm:00' title="开始时间："></datetime>
                  <datetime placeholder="请选择日期" @on-change="CTime" v-model="lablist.endTime" format='YYYY-MM-DD HH:mm:00' title="结束时间："></datetime>
                  <x-input style="display:none" title="累计时长:" placeholder='分钟' @on-focus="CTime" v-model="lablist.createTime" type="text" label-width="78px"></x-input>
                  <x-textarea title="备 注：" v-model="lablist.des" type="text" label-width="90px"></x-textarea>
                  <cell>
                    <x-button mini type="primary" @click.native="addlab">确定</x-button>&nbsp; 
                    <span @click="show=false"><x-button mini type="default">取消</x-button></span>
                  </cell>
              </group>     
            </div>
          </x-dialog>
        </div>     
        <div v-transfer-dom>
          <alert v-model="show1" title="错误提示！">请填写课程名！</alert>
          <alert v-model="show2" title="错误提示！">请填写作业名！</alert>
          <alert v-model="show3" title="错误提示！">请填写学年！</alert>
          <alert v-model="show4" title="错误提示！">请选择学期！</alert>
          <alert v-model="show5" title="警告！">请填写参与人数！</alert>
          <alert v-model="show6" title="警告！">请选择开始日期！</alert>
          <alert v-model="show7" title="警告！">请选择结束日期！</alert>
          <alert v-model="show8" title="警告！">请添加实验室！</alert>
          <alert v-model="show9" title="警告！">请填写次数！</alert>
          <alert v-model="show10" title="警告！">请填加实验室名！</alert>
          <alert v-model="show11" title="警告！">请选择开始时间！</alert>
          <alert v-model="show12" title="警告！">请选择结束时间！</alert>
          <alert v-model="show13" title="警告！">请填写备注！</alert>
          <alert v-model="show14" title="警告！">结束时间必须大于开始时间！</alert>
        </div>
    </div>
</template>

<script>
import {Group, XInput, Cell, XDialog, XTextarea, Alert, TransferDomDirective as TransferDom, CellBox, Box, Calendar, XNumber, CellFormPreview, XButton, Datetime, XTable} from 'vux'

export default {
  directives: {
    TransferDom
  },
  components: {
    Group,
    CellBox,
    XInput,
    Alert,
    XTextarea,
    Cell,
    Calendar,
    XTable,
    CellFormPreview,
    XDialog,
    Box,
    XNumber,
    Datetime,
    XButton
  },
  data () {
    return {
      value: '' * 0,
      show: false,
      lablist: {
        'createTime': '',
        'des': '',
        'endTime': '',
        'name': '',
        'number': 1,
        'startTime': ''
        // 'status': 1
      },
      list: {
        courseName: '',
        workName: '',
        year: '',
        term: 1,
        status: 1,
        member: '',
        startTime: '',
        endTime: '',
        labapplyrecordlist: []
      },
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show8: false,
      show9: false,
      show10: false,
      show11: false,
      show12: false,
      show13: false,
      show14: false
    }
  },
  methods: {
    CDate () {
      var a1 = new Date(this.list.startTime)
      var a2 = new Date(this.list.endTime)
      var i = (a2 - a1) / 60000
      if (i < 0) {
        this.show14 = true
      }
    },
    CTime () {
      var a1 = new Date(this.lablist.startTime)
      var a2 = new Date(this.lablist.endTime)
      var i = (a2 - a1) / 60000
      if (i < 0) {
        this.show = true
        this.show14 = true
      } else {
        console.log(i)
        this.lablist.createTime = i
      }
    },
    add () {
      this.show = true
    },
    submitapply () {
      this.CDate()
      if (this.list.courseName === '') {
        this.show1 = true
      } else if (this.list.workName === '') {
        this.show2 = true
      } else if (this.list.year === '') {
        this.show3 = true
      } else if (this.list.term === '') {
        this.show4 = true
      } else if (this.list.member === '') {
        this.show5 = true
      } else if (this.list.startTime === '') {
        this.show6 = true
      } else if (this.list.endTime === '') {
        this.show7 = true
      } else if (this.list.labapplyrecordlist.length === 0) {
        this.show8 = true
      } else {
        console.log(this.list)
        this.$http.post('/api/items/labApply', this.list).then((res) => {
          if (res.data.code === 0) {
            this.list = {
              courseName: '',
              workName: '',
              year: '',
              term: 1,
              member: 1,
              startTime: '',
              endTime: '',
              lablist: []
            }
            this.list.labapplyrecordlist = []
            alert('添加成功！')
            this.$router.push('/lab')
          } else {
            alert('添加失败！！')
          }
        })
      }
    },
    addlab () {
      this.CTime()
      if (this.lablist.number === 0) {
        this.show9 = true
      } else if (this.lablist.name === '') {
        this.show10 = true
      } else if (this.lablist.startTime === '') {
        this.show11 = true
      } else if (this.lablist.endTime === '') {
        this.show12 = true
      } else if (this.lablist.des === '') {
        this.show13 = true
      } else if (this.show14 === true) {
        this.show = true
      } else {
        this.list.labapplyrecordlist.push(this.lablist)
        this.lablist = {
          'createTime': 0,
          'des': '',
          'endTime': '',
          'name': '',
          'number': 1,
          'startTime': '',
          'status': 1
        }
        this.show = false
      }
    },
    deletelab (index) {
      this.list.labapplyrecordlist.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
@import '~vux/src/styles/close';
#applylab{
    padding-top: 40px;
    margin-bottom: 60px;
}
.add p {
    padding-top: 5px;
    margin: 10px;
    border-top: 1px dotted #ddd;
}
.vux-popup-dialog {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #eee;
    z-index: 60000;
}
// .dialog-demo {
//   .dialog-title {
//     line-height: 30px;
//     color: #666;
//   }
//   .img-box {
//     height: 350px;
//     overflow: hidden;
//   }
//   .vux-close {
//     margin-top: 8px;
//     margin-bottom: 8px;
//   }
// }
</style>
